import React, { PureComponent } from "react";
import "./style.css";
export class App extends PureComponent {
  constructor(props) {
    super();
    this.state = {
      username: "",
      password: "",
      sex: "男",
      hobbies: [
        { name: "篮球", checked: false },
        { name: "足球", checked: false },
        { name: "羽毛球", checked: false },
      ],
      fruit:[]
    };
  }
  handleSubmit(e) {
    e.preventDefault(); // 阻止默认行为
    console.log(this.state);
  }
  // 输入框的处理
  handleInput(e) {
    let targetEl = e.target.name;
    this.setState({
      [targetEl]: e.target.value,
    });
  }
  // 单选框处理
  handleRadio(e) {
    if (e.target.id === "male") {
      this.setState({
        sex: "男",
      });
    } else {
      this.setState({
        sex: "女",
      });
    }
  }
  // 处理多选
  handleCheckbox(e, index) {
    console.log(e,index, e.target.checked);
    let hobbies = [...this.state.hobbies];
    hobbies[index].checked = e.target.checked;
    this.setState({
      hobbies,
    })
  }
  // 下拉多选
  handleSelect(e) {
    const { fruit } = this.state;
    let options = Array.from(e.target.selectedOptions).map((item) => item.value);
    console.log(options)
    this.setState({
      fruit: options
    })
  }
  render() {
    const { username, password, sex, hobbies, fruit } = this.state;
    return (
      <div className="container">
        <h1>表单数据的处理</h1>
        <form
          onSubmit={(e) => {
            this.handleSubmit(e);
          }}
        >
          {/* 输入框 */}
          <div>
            <span>用户名:</span>
            <label htmlFor="username">
              <input
                type="text"
                value={username}
                name="username"
                id="username"
                onChange={(e) => this.handleInput(e)}
              />
            </label>
          </div>
          <div>
            <span>密码:</span>
            <label htmlFor="password">
              <input
                type="password"
                value={password}
                name="password"
                id="password"
                onChange={(e) => this.handleInput(e)}
              />
            </label>
          </div>

          {/* 单选 */}
          <div>
            <label htmlFor="male">
              <span>男</span>
              <input
                type="radio"
                checked={sex === "男"}
                id="male"
                onChange={(e) => this.handleRadio(e)}
              />
            </label>
            <label htmlFor="womale">
              <span>女</span>
              <input
                type="radio"
                id="womale"
                checked={sex === "女"}
                onChange={(e) => this.handleRadio(e)}
              />
            </label>
          </div>
          {/* 多选 */}
          <div>
            {hobbies.map((item, index) => {
              return (
                <label htmlFor={item.name} key={index}>
                  <span>{item.name}</span>
                  <input
                    type="checkbox"
                    id={item.name}
                    checked={item.checked}
                    onChange={(e) => this.handleCheckbox(e, index)}
                  />
                </label>
              );
            })}
          </div>
          {/* 下拉选择则 */}
          <div>
            <select multiple value={fruit} 
            onChange={(e) => this.handleSelect(e)}>
              <option value="苹果">苹果</option>
              <option value="香蕉">香蕉</option>
              <option value="橘子">橘子</option>
              <option value="西瓜">西瓜</option>
              <option value="葡萄">葡萄</option>
            </select>
          </div>

          <div>
            <input
              type="submit"
              value="提交"
              onChange={(e) => this.handleSubmit(e)}
            />
          </div>
        </form>
      </div>
    );
  }
}

export default App;
